<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<input type="button" value="ajax get" onclick="ajaxGet()" /><br/>
	<input type="button" value="ajax post" onclick="ajaxPost()" /><br/>
	<input type="button" value="ajax" onclick="ajax()" /><br/>
	
	<script type="text/javascript" src="js/jquery.min.js" charset="utf-8"></script>
	<script type="text/javascript">
		function ajaxGet() {
			// $.get(url, [data], [callback], [type])
			$.get('${pageContext.request.contextPath}/ajax',
					{'name' : '张三' , 'age' : '23'},
					function(jsonObj){
						console.log(jsonObj);
					},
					'json'
			
			);
			
			function ajaxPost() {
				// $.post(url, [data], [callback], [type])
				$.post('${pageContext.request.contextPath}/ajax', // url：代表请求的服务器端地址
					   {'name' : '张三2', 'age' : 24},   // data：代表请求服务器端的数据
					   function(jsonObj) {  //callback：表示服务器端成功响应所触发的函数
						   console.log(jsonObj);
					   },
					   'json' // type：表示服务器端返回的数据类型
				);
			}
			function ajax() {
				// $.ajax( { option1:value1,option2:value2... } ); 
				$.ajax({
					url : '${pageContext.request.contextPath}/ajax', // 请求服务器端地址
					async : true,  // async：是否异步，默认是true代表异步。
					data :  {'name' : '王五', 'age' : 33},  //data：发送到服务器的参数，建议使用json格式 
					success : function(jsonObj) {  // 成功响应执行的函数，对应的类型是function类型
						 console.log(jsonObj);
					},
					dataType : 'json',    // 服务器端返回的数据类型，常用text和json
					type : 'GET'   // 请求方式，POST/GET
				});
			}
		}
	</script>
</body>
</html>